<script lang="ts" setup>
import { useControllerStore } from '@/store';
import { navigate } from '@/utils/navigate';

const store = useControllerStore();
const show = ref<boolean>(false);
const deviceList = ref<IObtainDeviceListUnderDeviceCategoryRes[]>([]);

watch(
  () => store.$state.deviceListPopupData,
  (deviceListPopupData) => {
    show.value = deviceListPopupData.length > 0 ? true : false;
    deviceList.value = deviceListPopupData;
    if (deviceList.value && deviceList.value.length === 1) {
      navigate({ url: `/subcontract/equipment/equipDetail/index?id=${deviceList.value[0].id}` });
    }
  },
);
</script>
<template>
  <van-popup position="bottom" round :show="show" @close="show = false">
    <van-picker show-toolbar value-key="name" :columns="deviceList" title="请选择产品" @cancel="show = false" @confirm="navigate({ url: `/subcontract/equipment/equipDetail/index?id=${$event.detail.value.id}` })" />
  </van-popup>
</template>
